<template>
  <div><div class="abstatic-height"></div>
    <div class="app-container calendar-list-container">
      <el-row>
        <div class="xf-tabletop-handles">
          <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="query.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item label="选择出生日期">
              <el-date-picker v-model="query.start" type="date" placeholder="开始日期"></el-date-picker>
              <el-date-picker v-model="query.end" type="date" placeholder="结束日期"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-row>
      <el-table :data="list" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180"></el-table-column>
        <el-table-column label="姓名" width="180">
          <template slot-scope="scope">
            <span v-html="scope.row.name"></span>
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="birthday" label="出生日期"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :current-page="pageNum"
        :page-size="pageSize"
        :total="total"
        @current-change="page">
      </el-pagination>
    </div>
  </div>

</template>

<script>

export default {
  name: "index",
  data(){
    return{
      query:{
        name:"",
        start:null,
        end:null
      },
      list:[],
      pageNum:1,
      pageSize:10,
      total:null,
    }
  },
  methods:{
    page(val){
      this.pageNum=val;
      this.initList();
    },
    initList(){
      this.axios.post("http://localhost:9090/people/list?pageNum="+this.pageNum+"&pageSize="+this.pageSize,this.query).then(resp=>{
        this.list=resp.data.content
        this.pageNum=resp.data.pageable.pageNumber+1
        this.pageSize=resp.data.pageable.pageSize
        this.total=resp.data.totalElements
        console.log(resp.data);
      }).catch(error=>{
        console.log(error);
      });
    },
    onSubmit(){
      this.initList();
    }
  },
  created() {
    this.initList();
  }
}
</script>

<style scoped>

</style>
